import React, { useState, useEffect, useRef } from 'react';
import { Input, Button, message } from 'antd';
import { VARIABLE_TYPE } from 'src/utils/constant';

import './index.less';

export default function Literal(props) {
  const [value, setValue] = useState(props.type === VARIABLE_TYPE._LITERAL ? props.value : '');
  const textAreaNode = useRef(null);
  useEffect(() => {
    props.current_type !== VARIABLE_TYPE._LITERAL ? setValue('') : setValue(props.value);
    setFous();
  }, [props.value, props.current_type]);
  useEffect(() => {
    if (props.tabName === 'literal') {
      setFous();
    };
  }, [props]);
  function setFous() {
    textAreaNode && textAreaNode.current.focus();
  }
  function onHandleClick() {
    if (!value) {
      message.warning('请设置常量值');
      return;
    }
    props.onCallback({ var_type: VARIABLE_TYPE._LITERAL, code: value });
  }
  return (
    <div>
      <Input.TextArea value={value} ref={textAreaNode} onChange={(e) => setValue(e.target.value)} className='text-area-style' />
      <div className='btn-area' style={{ margin: '10px' }}>
        <Button onClick={onHandleClick}>确定</Button>
        <Button onClick={() => props.onHandleVisible && props.onHandleVisible(false)}>取消</Button>
      </div>
    </div>
  );
}
